<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <div th:fragment="side-fragment" class="am-u-lg-4 am-u-sm-12 am-u-lg-offset-0 am-u-sm-offset-0 sidebar-container">
        <section>
            <section>
                <div class="sidebar-header">
                    <span class="sidebar-header-title">
                        搜索文章
                    </span>
                </div>
                <div class="sidebar-search">
                    <form method="get" onsubmit="return false;" accept-charset="utf-8">
                        <div class="search-input">
                            <input type="text" name="keyword" id="searchBox" autocomplete="off" placeholder="输入关键字搜索">
                            <button type="submit" class="search-submit" onclick="search()"></button>
                        </div>
                    </form>
                </div>
            </section>

            <section>
                <div class="sidebar-header">
                    <span class="sidebar-header-title">
                        最新发布
                    </span>
                </div>
                <div class="sidebar-list">
                    <ul class="sidebar-list-body sidebar-list-items">
                        <th:block th:if="${null != newBlogs}">
                            <th:block th:each="newBlog : ${newBlogs}">
                                <li class="sidebar-list-item">
                                    <a th:href="@{'/blog/' + ${newBlog.blogId}}"
                                       class="tag tooltipped tooltipped-n">
                                        <th:block th:text="${newBlog.blogTitle}"/>
                                    </a>
                                </li>
                            </th:block>
                        </th:block>
                    </ul>
                </div>
            </section>

            <section>
                <div class="sidebar-header">
                    <span class="sidebar-header-title">
                        点击最多
                    </span>
                </div>
                <main class="sidebar-lists">
                    <ul>
                        <th:block th:if="${null != hotBlogs}">
                            <th:block th:each="hotBlog : ${hotBlogs}">
                                <li class="sidebar-list-item">
                                    <a class="tag tooltipped tooltipped-n"
                                       th:href="@{'/blog/' + ${hotBlog.blogId}}">
                                        <th:block th:text="${hotBlog.blogTitle}"/>
                                    </a>
                                </li>
                            </th:block>
                        </th:block>
                    </ul>
                </main>
            </section>
        </section>
    </div>
</html>